/*
 * @Author: your name
 * @Date: 2022-03-10 20:34:43
 * @LastEditTime: 2022-03-25 17:17:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \blog-system-front\src\Pages\Article\SearchList.js
 */
import React, { useState } from "react";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { Form, Row, Col, Input, Button, DatePicker, Select } from "antd";
import moment from "moment";
export default function SearchList(props) {
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);
  const { initData, category } = props;
  const getFields = () => {
    const count = expand ? 10 : 6;
    const children = [
      <Col span={8} key="articleName">
        <Form.Item name="articleName" label="文章名称">
          <Input />
        </Form.Item>
      </Col>,
      <Col span={8} key="category">
        <Form.Item name="category" label="文章分类">
          <Select
          
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {category.map((d) => {
              if (d.isTopLevel !== 1) {
                return (
                  <Select.Option value={d.category_name}>
                    {d.category_name}
                  </Select.Option>
                );
              }
              
            })}
          </Select>
        </Form.Item>
      </Col>,
      <Col span={8} key="creationDate">
        <Form.Item name="creationDate" label="创建日期">
          <DatePicker />
        </Form.Item>
      </Col>,
    ];
    return children;
  };
  /**
   * @description: 表单提交事件
   * @param {*} values
   * @return {*}
   */
  const onFinish = (values) => {
    Object.keys(values).forEach((key) => {
      if (typeof values[key] === "string") {
        values[key] = values[key].trim();
      }
    });
    const params = {
      ...values,
      creationDate: values.creationDate
        ? moment(values.creationDate).format("YYYY-MM-DD")
        : null,
    };
    initData(params);
  };

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
      onChange={(e) => e.trim()}
    >
      <Row gutter={24}>{getFields()}</Row>
      <Row>
        <Col span={24} style={{ textAlign: "right" }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            style={{ margin: "0 8px" }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
          {getFields().length > 3 && (
            <a
              style={{ fontSize: 12 }}
              onClick={() => {
                setExpand(!expand);
              }}
            >
              {expand ? <UpOutlined /> : <DownOutlined />} 更多查询
            </a>
          )}
        </Col>
      </Row>
    </Form>
  );
}
